<div id="dashboard" class="page-layout blank">

  <div class="content">

    <div class="mr-lg-32" fxFlex="100" *ngIf="account">

      <mat-toolbar-row class="warning" *ngIf="!account.confirmed && account.balanceNQT">
        <mat-icon>warning</mat-icon>
        <span>{{ 'no_public_key_warning' | i18n }}</span>
        <button class="activate" mat-raised-button (click)="activateAccount()"
                disabled="{{isActivating}}">{{'activate' | i18n}}</button>
      </mat-toolbar-row>

      <div fxLayout="column" fxLayoutAlign="start" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start start">
        <div class="widget" fxFlex="100" fxFlex.gt-sm="40" fxFlex.gt-md="60">
          <div class="fuse-card auto-width mb-32" [ngClass.gt-sm]="'mb-0 mr-32'">
            <app-balance
              [account]="account"
              [priceBtc]="priceBtc"
              [priceUsd]="priceUsd"
            ></app-balance>
          </div>
        </div>

        <div class="widget" fxFlex="100" fxFlex.gt-sm="60">
          <div class="fuse-card auto-width mb-32" [ngClass.gt-sm]="'mb-0'">
            <div class="p-16" fxLayout="column wrap" fxLayoutAlign="center">
              <div style="width: 100%">
                <div class="h3 secondary-text">{{ 'balance_history' | i18n }}</div>
                <div *ngIf="!account.transactions.length">
                  {{ 'no_transactions_yet' | i18n }}
                </div>
                <div *ngIf="account.transactions.length" [ngClass.gt-md]="'font-size-54'"
                     class="font-size-30 font-weight-300 line-height-1 mt-8">
                  <app-balance-diagram
                    [account]="account"
                    [transactionCount]="50"
                  ></app-balance-diagram>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div fxLayout="column" fxLayoutAlign="start" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start start">
        <div class="widget" fxFlex="100" fxFlex.gt-sm="60">
          <div class="fuse-card auto-width mb-32" [ngClass.gt-sm]="'mb-0 mr-32'">
            <div class="p-16 recent-transactions" fxLayout="column wrap" fxLayoutAlign="start">
              <div class="h3 secondary-text">{{ 'recent_transactions' | i18n }}</div>
              <app-transaction-table *ngIf="dataSource && dataSource.data.length"
                                     [displayedColumns]="['transaction_id', 'attachment', 'timestamp', 'amount', 'account']"
                                     [dataSource]="dataSource"
                                     [account]="account"
                                     [paginationEnabled]="false"
              ></app-transaction-table>
              <div *ngIf="!dataSource" class="text-center">
                <div>
                  {{ 'no_transactions_yet' | i18n }}
                </div>
                <a href="http://faucet.burst-alliance.org:8080" target="_blank">
                  {{ 'click_to_claim' | i18n }}
                </a>
              </div>
            </div>
            <a *ngIf="dataSource && dataSource.data.length"
               class="p-16" fxLayoutAlign="end"
               [routerLink]="'/transactions'">{{ 'all_transactions' | i18n }}</a>
          </div>
        </div>
        <div class="widget" fxFlex="100" fxFlex.gt-sm="40">
          <div class="fuse-card auto-width mb-32" [ngClass.gt-sm]="'mb-0'">
            <div class="p-16" fxLayout="row wrap" fxLayoutAlign="start end">
              <div style="width: 100%">
                <div class="h3 secondary-text">{{ 'market_info' | i18n }}</div>
                <app-market-overview></app-market-overview>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
